<template>
  <page-header-wrapper :title="false">
    <a-card
      :loading="loading"
      title="消息详情"
    >
      <a-form-model
        ref="messageForm"
        :rules="messageRules"
        :model="messageForm"
      >
        <a-form-model-item label="消息类型" prop="msg_type">
          <a-select v-model="messageForm.msg_type" placeholder="请选择消息发布的类型">
            <a-select-option v-for="(item,index) in msgTypeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="消息标题" prop="title">
          <a-input type="text" v-model="messageForm.title" placeholder="请输入消息发布的标题" />
        </a-form-model-item>
        <a-form-model-item label="消息内容" prop="content">
          <quill-editor :value="messageForm.content" @change="onChange"></quill-editor>
        </a-form-model-item>
        <a-form-model-item label="消息署名" prop="author">
          <a-input type="text" v-model="messageForm.author" />
        </a-form-model-item>
        <a-form-model-item label="附件" prop="file">
          <a-upload
            name="file"
            :action="uploadUrl"
            :headers="headers"
            @change="onChangeUpload"
          >
            <a-button> <a-icon type="upload" /> 上传附件 </a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="选择发布的公司" prop="company">
          <a-checkbox-group v-model="messageForm.company">
            <a-checkbox v-for="(item,index) in companyOpts" :key="index" :value="index">
              {{item}}
            </a-checkbox>
          </a-checkbox-group>
        </a-form-model-item>
        <a-divider />
        <a-form-model-item style="text-align: right" v-if="!isEdit">
          <a-button type="primary" style="margin-right:5px" @click="confirmSend" v-text="isEdit ? '保存修改' : '确认发布'"></a-button>
          <a-button type="default" @click="reset">重置表单</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import QuillEditor from '@/components/Editor/QuillEditor'
import { getAddMsg, getEditMsg, postAddMsg } from '@/api/message'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import apis from '@/api'

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  components: {
    QuillEditor
  },
  name: 'MessageDetail',
  data () {
    return {
      messageForm: {},
      messageRules: {
        msg_type: [{ required: true, message: '必须选择消息类型', trigger: 'blur' }],
        title: [{ required: true, message: '必须填写消息标题', trigger: 'blur' }],
        content: [{ required: true, message: '消息内容不能为空', trigger: 'blur' }],
        company: [{ required: true, message: '必须选择发布公司', trigger: 'change' }],
        author: [{ required: true, message: '必须填写消息署名', trigger: 'change' }]
      },
      msgTypeOpts: {},
      companyOpts: {},
      headers: { 'Access-Token': storage.get(ACCESS_TOKEN) },
      uploadUrl: apis.Upload,
      loading: true,
      company: []
    }
  },
  created () {
    this.loading = true
    this.getAdd()
    if (this.isEdit) {
      this.getEdit(this.$route.params.id)
    }
    // this.loading = false
  },
  methods: {
    getEdit (id) {
      getEditMsg(id).then(res => {
        this.messageForm = res.result.msg
      }).finally(() => {
        this.loading = false
      })
    },
    getAdd () {
      getAddMsg().then(res => {
        this.msgTypeOpts = res.result.msg_type
        this.companyOpts = res.result.companyOpts
      }).finally(() => {
        this.loading = false
      })
    },
    onChange (html) {
      this.messageForm.content = html
    },
    confirmSend () {
      const app = this
      const data = {}
      app.$refs.messageForm.validate(valid => {
        if (valid) {
          app.$confirm({
            title: '确认发布此消息吗',
            onOk: () => {
              for (const k in app.messageForm) {
                if (k !== 'company') {
                  data['msg[' + k + ']'] = app.messageForm[k]
                }
              }
              data['company'] = app.messageForm.company
              postAddMsg(data).then(res => {
                if (res.status === 0) {
                  app.$message.success('发布成功')
                  app.$router.push({ name: 'MessageList' })
                } else {
                  app.$warning({
                    title: res.msg
                  })
                }
              })
            }
          })
        } else {
          return false
        }
      })
    },
    onChangeUpload (info) {
      if (info.file.status === 'done') {
        this.messageForm.file = info.file.response.result.url
        this.messageForm.filename = info.file.name
      }
    },
    reset () {
      this.messageForm = {}
    }
  }
}
</script>

<style scoped>

</style>
